<template>
  <a-drawer destroyOnClose title="选择冻存盒" width="80%" :visible="visible" @close="onClose">
    <a-form ref="userform" :model="formdata" name="basic" :wrapper-col="{ span: 20 }" autocomplete="off">
      <a-row style="height: 40px">
        <a-col :span="1" style="text-align: center; height: 32px; line-height: 32px"> 查询条件&nbsp; </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-select allowClear v-model:value="formdata.status" placeholder="冻存盒状态">
              <a-select-option v-for="j in antSelect" :value="j.id" :key="j.id">{{ j.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-input v-model:value="formdata.serial" placeholder="冻存盒编号" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-select placeholder="冻存盒类型" allowClear v-model:value="formdata.boxId" :options="boxTypeList" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-cascader placement="bottomRight" :maxTagCount="1" v-model:value="storageId" :options="options"
              placeholder="存储位置" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-button type="primary" style="margin-left: 10px; height: 30px" @click="getBoxdata">查询</a-button>
        </a-col>
        <a-col :span="8">
          <a-button :disabled="allSelect" @click="getSelectEvent1" type="primary" style="float: right">批量选择</a-button>
        </a-col>
      </a-row>
    </a-form>
    <vxe-table align="center" border ref="xTable1" :data="tableBoxData" @checkbox-all="selectAllChangeEvent1"
      height="350px" :row-config="{ height: 35, isCurrent: true, isHover: true }" show-overflow
      @checkbox-change="selectChangeEvent1" @current-change="currentChangeEvent">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="serial" title="冻存盒编号"></vxe-column>
      <vxe-column field="boxSerial" title="冻存盒类型"></vxe-column>
      <vxe-column field="status" title="冻存盒状态">
        <template #default="{ row }">
          <span>{{ row.status == 1 ? '已入库' : row.status == 2 ? '待入库' : '空盒' }}</span>
        </template>
      </vxe-column>
      <vxe-column field="storageDesp" title="存储位置"></vxe-column>
      <vxe-column field="availableCount" title="剩余孔位数"></vxe-column>
      <vxe-column field="existCount" title="存放孔位数"></vxe-column>
      <vxe-column field="projectNames" title="项目组"></vxe-column>
      <vxe-column field="sampleTime" title="操作">
        <template #default="{ row }">
          <a-button type="primary" size="small" @click="submit(row)">选择</a-button>
        </template>
      </vxe-column>
    </vxe-table>
    <div style="margin-top: 20px">
      <div style="display: flex">
        <StorageLocation ref="location" :list="tableData" :row="boxData.rows" :cols="boxData.cols"> </StorageLocation>
        <div class="inptable">
          <vxe-table align="center" border ref="vxeTable123" :data="tableData" max-height="400px"
            :row-config="{ height: 35 }" show-overflow>
            <vxe-column title="位置" width="70px">
              <template #default="{ row }">
                {{ row.seat }}
              </template>
            </vxe-column>
            <vxe-column field="originalSerial" title="样本编号"></vxe-column>
            <vxe-column field="name" title="样本名称"></vxe-column>
            <vxe-column field="createTime" title="采样日期" width="170px"></vxe-column>
            <vxe-column field="serial" title="数字编号"></vxe-column>
            <vxe-column field="newcapacity" title="容量" width="70px"></vxe-column>
          </vxe-table>
        </div>
      </div>
    </div>
  </a-drawer>
</template>
<script setup lang="ts">
import { ref, defineExpose, reactive, defineEmits } from 'vue';
import StorageLocation from '@/components/StorageLocation.vue';
import { subscript } from '@/libs/utils';
import { getBox, aloneStrictMode } from '../../../api/input_manage';
import { boxSearchAll } from '@/api/base/box_data';
import { useRoute } from 'vue-router';
const route = useRoute();
// 弹框逻辑部分
const visible = ref(false);
const emit = defineEmits(['submitData']);
const props = defineProps({
  options: { type: Array, default: [] },
});
const boxTypeList = ref();
const getBoxTypeList = async () => {
  const res = await boxSearchAll();
  boxTypeList.value = res.result.map((item) => ({
    label: item.serial,
    value: item.id,
  }));
};
getBoxTypeList();
const vxeTable123 = ref();
const antSelect = [
  { name: '已入库', id: 1 },
  { name: '待入库', id: 2 },
  { name: '空盒', id: 3 },
];
// const options = ref([]);
const xTable1 = ref();
const tableData: any = ref();
const tableBoxData: any = ref([]);
const location = ref();
const storageId = ref([]);
const formdata = reactive({
  status: null,
  boxId: null,
  storageId: null,
  serial: '',
});
const onClose = () => {
  visible.value = false;
  formdata.status = null;
  formdata.boxId = null;
  formdata.storageId = null;
  storageId.value = []
  formdata.serial = '';
  tableData.value = [];
};

const boxData = ref({ rows: 10, cols: 10 });
const currentChangeEvent = async ({ row }) => {
  boxData.value = row;
  tableData.value = []
  if (row.existCount > 0) {
    const { result } = await aloneStrictMode(row.stockId);
    tableData.value = result.map((item) => {
      let serial = item.serial
      return {
        ...item,
        ...item?.specimen,
        sortIndex: item.strainIndex,
        newcapacity: item?.capacity + (item?.unit == 1 ? 'ml' : 'μl'),
        seat: subscript(item.strainIndex, row.rows),
        serial: serial
      }
    });
  }
};
if (!route.query.id) {
  visible.value = true
}
// 获取盒子信息
const getBoxdata = async () => {
  storageId.value ? formdata.storageId = storageId.value[storageId?.value.length - 1] : formdata.storageId = null
  const queryParam = formdata;
  const query = {
    pageSize: 500,
    pageNum: 1,
    'orderBy[0].field': 'createTime',
    'orderBy[0].order': 'desc',
  };
  const { result } = await getBox(queryParam, query);
  tableBoxData.value = result.data.filter(item => item.availableCount != 0);


};
getBoxdata();
const allSelect = ref(true);
const getSelectEvent1 = async () => {
  const $table = xTable1.value;
  const selectRecords = $table.getCheckboxRecords();
  for (let i = 0; i < selectRecords.length; i++) {
    if (selectRecords[i].existCount > 0) {
      const { result } = await aloneStrictMode(selectRecords[i].stockId);
      selectRecords[i].tableData = result.map((item) => ({
        ...item,
        ...item.specimen,
        id: item.id,
        sortIndex: item.strainIndex,
        seat: subscript(item.strainIndex, selectRecords[i].rows),
      }));
    } else {
      selectRecords[i].tableData = [];
    }
  }
  emit('submitData', selectRecords);
};
const selectChangeEvent1 = () => {
  const table: any = xTable1.value;
  const records: any = table.getCheckboxRecords();
  allSelect.value = records.length == 0;
};
const selectAllChangeEvent1 = ({ checked }) => {
  allSelect.value = !checked;
};
const submit = async (row) => {
  if (row.existCount > 0) {
    const { result } = await aloneStrictMode(row.stockId);
    row.tableData = result.map((item) => ({
      ...item,
      ...item.specimen,
      id: item.id,
      newcapacity: item?.capacity + (item?.unit == 1 ? 'ml' : 'μl'),
      sortIndex: item.strainIndex,
      seat: subscript(item.strainIndex, row.rows),
    }));
  } else {
    row.tableData = [];
  }
  emit('submitData', [row]);
  // visible.value = false
};


defineExpose({
  visible,
});
</script>
<style lang="less" scoped>
.inptable {
  flex: 1;
  margin-left: 20px;
}

.inventory {
  border: 1px solid #ccc;
  height: 85%;
  width: 100%;
  overflow: auto;
}
</style>
